<template>
    <el-sub-menu v-if="item.children && item.children.length" :index="item.path">
        <template #title>
            <el-icon v-if="item.icon">
                <component :is="item.icon" />
            </el-icon>
            <span v-if="!collapse">{{ item.title }}</span>
        </template>
        <SidebarMenuItem v-for="child in item.children" :key="child.path" :item="child" :collapse="collapse" />
    </el-sub-menu>
    <el-menu-item v-else :index="item.path">
        <el-icon v-if="item.icon">
            <component :is="item.icon" />
        </el-icon>
        <template v-if="!collapse">
            <span class="menu-dot" v-if="$attrs.class && $attrs.class.includes('is-active')"></span>
            <span>{{ item.title }}</span>
        </template>
        <el-badge v-if="item.badge" :value="item.badge" class="menu-badge" />
    </el-menu-item>
</template>
<script setup>
import SidebarMenuItem from './SidebarMenuItem.vue'
defineProps({
    item: Object,
    collapse: Boolean
})
</script>
<style scoped>
.menu-badge {
    margin-left: 8px;
    vertical-align: middle;
}

.menu-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--el-color-primary, #409EFF);
    margin-right: 8px;
    vertical-align: middle;
}
</style>